<template>
  <van-search v-model="title" @search="onSearch" placeholder="请输入搜索关键词" />
  <div class="video-list">
    <div class="video-item left" v-for="(item, index) in videoList" key="index">
      <van-image
        fit="cover"
        class="video"
        :src="item.cover"
      ></van-image>
      <div>
        <div class="c2">{{item.title}}</div>
        <div class="c9">{{item.desc}}</div>
      </div>
    </div>
  </div>
  <div style="height: 50px"></div>
</template>
<script>
  import tabbar from "../../components/tabbar/index.vue"
  import navbar from "../../components/navbar/index.vue"
  import {bindScroll} from '../../utils/index.js'
  import {
    computed,
    defineComponent,
    ref,
    toRefs,
    onMounted,
    reactive,
    watch,
    getCurrentInstance,
  } from "vue";
  export default defineComponent({
    components: {
      tabbar,
      navbar,
    },
    setup(props) {
      const { proxy } = getCurrentInstance();
      const data = reactive({
        form: {},
        title:"",
        videoList:[],
        videoPage:1,
        videoPer:6
      });

      onMounted(async () => {
        bindScroll({
          onScrollBottom(){
            videoListReload();
          }
        })
      })
      const videoListReload = async () => {
        const res = await proxy.$post("v1/video/search", { title: data.title, page:data.videoPage, per:data.videoPer })
        data.videoList = [...data.videoList,...res.data]
        data.videoPage = data.videoPage + 1
      }
      const onSearch = async () => {
        data.videoList = []
        data.videoPage = 1
        videoListReload()
      }
      const submit = async () => {};
      return {
        ...toRefs(data),
        submit,
        onSearch
      };
    },
  });
</script>
<style lang="less" scoped>
  .home {
    background: rgba(248, 248, 248, 1);
    min-height: calc(100vh);
    overflow: hidden;
    background-size: cover;
    position: relative;
  }
  .video-list {
    padding: 10px;
  }
  .video {
    margin-right: 20px;
    width: 250px;
    height: 250px;
  }
  .video-item {
    .c2 {
      padding-top: 20px;
      padding-bottom: 20px;
      font-size: 0.2rem;
    }
    .c9 {
      padding-top: 20px;
      font-size: 0.14rem;
    }
    // width: 49%;
    padding-bottom: 10px;
  }
</style>
